<template>
  <view class="tabbar-box">
    <view
      class="tabbar"
    >
      <view
        class=""
        :class="[{
          circle: circleIndex == index,
          active: currentValue == index,
          animation,
        }, circleIndex == index ? 'item1': 'item' ]"
        v-for="(item, index) in list"
        :key="index"
        @click="onChange(index, item)"
      >
        <view class="polyfill" v-if="circleIndex == index"></view>
        <view class="icon" >
          <image
            :src="currentValue == index ? item.selectedIconPath : item.iconPath"
            mode="widthFix"
            class="img"
          />

          <slot name="activeIcon" v-if="currentValue == index"></slot>
          <slot name="icon" v-if="currentValue != index"></slot>
        </view>

        <view class="name">
          {{ item.text }}
        </view>
      </view>
    </view>

    <view class="polyfill"></view>
  </view>
</template>

<script>
import { imgBaseUrl, imgBaseUrlV2 } from "@/common/config/index";
let baseURL = imgBaseUrlV2 + "tabbar/";
export default {
  name: "MyTabbar",
  props: {
    value: {
      type: Number,
      default: 0,
    },
    stop: {
      type: Boolean,
      default: true,
    },
    animation: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default() {
        return [
          // {
          //   iconPath: baseURL + "maintenance.png",
          //   selectedIconPath: baseURL + "maintenance_active.png",
          //   text: "首页",
          //   customIcon: false,
          // },
        ];
      },
    },
    circle: {
      default: true,
    },
  },
  computed: {
    circleIndex() {
      if (!this.circle) return -1;
      let index = Math.floor(this.list.length / 2);
      return index;
    },
  },
  data() {
    return {
      currentValue: this.value,
      baseURL,
    };
  },
  watch: {
    value() {
      this.currentValue = this.value;
    },
  },
  activated() {
    // console.log(this.current)
    // 解决首页按钮没有激活问题
    this.currentValue = this.value;
  },
  mounted() {
    // console.log(this.current)
  },
  methods: {
    onChange(e) {
      this.currentValue = e;
      this.$emit("change", e);
      this.$emit("input", e);
    },

    reset() {
      let v = this.currentValue;
      this.currentValue = -1;
      this.$nextTick(() => {
        this.currentValue = v;
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(275deg);
  }

  100% {
    transform: rotate(0);
  }
}

.tabbar-box {
  position: fixed;
  z-index: 95;
  width: 100%;
  bottom: 0;
  left: 0;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
  // background: linear-gradient(180deg, #193554 0%, #143157 100%);
  >.polyfill {
	// width: 100%;
	// height: 80rpx;
    background:  #143157;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.tabbar {
  display: flex;
  // padding-top: 60rpx;
  background-size: cover;
  height: 120rpx;
  // overflow: hidden;
  background-position: center;
  // background: linear-gradient(180deg, #193554 0%, #143157 100%);
  >.item {
    position: relative;
    flex: 1;
    padding: 10rpx 0 6rpx;
    background: linear-gradient(180deg, #193554 0%, #143157 100%)
    // background: #fff;
    &.circle {
		position :relative;
		.polyfill {
			position: absolute;
			bottom:100rpx;	
			width 88rpx;
			height 88rpx;
			left:50%;
			margin-left: -44rpx;
			border-radius 50%;
			background-color: rgba(0,0,0,0);
		}
      >.icon {
        position: relative;
        >.img {
          position: absolute;
		  display block;
          width: 110rpx;
          height: 110rpx !important;
          max-width: 110rpx;
          max-height: 110rpx;
		  border-radius 50%;
		  border: 2px solid rgba(0,0,0,0);
          left: 0;
          right: 0;
          bottom: 10rpx;
		  z-index 10000;
          transition: all 0.3s;
        }
      }
    }

	
    &.animation {
      &.active {
        &.circle {
          >.icon {
            >.img {
              animation-name: rotate;
              animation-duration: 2s;
            }
          }
        }
      }
    }

    &.active {
      >.name {
        color: color-active;
      }
    }

    >.icon {
      position: relative;
      z-index: 10000;
      height: 48rpx;

      >.img {
        display: block;
        max-width: 44rpx;
        max-height: 44rpx;
        margin: 0 auto;
      }
    }

    >.name {
      text-align: center;
      font-size: 24rpx;
      color: #B0B7D5;
    }
  }
  >.item1 {
    position: relative;
    flex: 1;
    padding: 10rpx 0 6rpx;
   
    &.circle {
  		position :relative;
  		.polyfill {
  			position: absolute;
  			width 100%;
  			height 100%;
  			left:0;
  			top: 0;
			// border-top-right-radius: 20px;
  			background: linear-gradient(180deg, #193554 0%, #143157 100%);
			z-index: -99;
			::before {}
			
  		}
		.polyfill::before {
			content: '';
			position: absolute;
			/* top: -17px; */
			bottom: 99rpx;
			right: -25px;
			width: 110rpx;
			height: 110rpx;
			border-radius: 50%;
			background-color:transparent ;
		}
      >.icon {
        position: relative;
        >.img {
          position: absolute;
  		  display block;
          width: 110rpx;
          height: 110rpx !important;
          max-width: 110rpx;
          max-height: 110rpx;
  		  border-radius 50%;
  		  border: 2px solid rgba(0,0,0,0);
          left: 0;
          right: 0;
          bottom: 10rpx;
  		  z-index 10000;
          transition: all 0.3s;
        }
      }
    }
  
  	
    &.animation {
      &.active {
        &.circle {
          >.icon {
            >.img {
              animation-name: rotate;
              animation-duration: 2s;
            }
          }
        }
      }
    }
  
    &.active {
      >.name {
        color: color-active;
      }
    }
  
    >.icon {
      position: relative;
      z-index: 10000;
      height: 48rpx;
  
      >.img {
        display: block;
        max-width: 44rpx;
        max-height: 44rpx;
        margin: 0 auto;
      }
    }
  
    >.name {
      text-align: center;
      font-size: 24rpx;
      color: #B0B7D5;
    }
  }
}
</style>